[JS] if 和 switch 的使用時機

if 和 switch 時常會被拿來比較，無論是可讀性、嚴謹性、效能...等，在比較前先了解基本的撰寫結構。

💎 if else

🔸 基本結構，至少要有一個條件判斷：

if (true) {
    console.log("Hello, if!");
}

🔸 非 A 及 B：

let agreement = true;
if (agreement) {
    console.log("同意");
} else {
    console.log("不同意");
}

🔸 多個判斷：

• JavaScript 中的 else if 需要空白隔開（其他程式語言有些是撰寫成 elseif）。
• else 非必要項目，在不符合所有的 if 或 else if 時執行。

  let x = 100;
  if (x >= 10000) {
    /* do something */
  } else if (money >= 1000) {
    /* do something */
  } else if (money >= 100) {
    /* do something */
  } else {
    /* do something */
  }
  

🔸 巢狀判斷

• 可以在 if-else 內再加入 if-else 逐步判斷。
• 層級過多時不易閱讀。

  if (temperature > 28) {
    console.log("stay home");
  } else {
    if (humidity > 50) {
        console.log("stay home");
    } else {
        if (traffic === 'nice') {
            console.log("stay home");
  ...
  

💎 switch

🔸 基本結構：

• 條件數量可以自行增減。
• 每個條件結束後需加上 break 終止執行。
• default 不一定要放在最後，可以插在中間或最前面，不影響程式執行。

  switch (要判斷的資料) {
  case 條件1:
    /* do something */
    break;
  case 條件2:
    /* do something */
    break;
  ...
  case 條件n:
    /* do something */
    break;
  default:
    /* 上述條件都不符合時執行 */
    break;
  }
  

🔸 switch 中的 break 不能遺漏

如果忘記在 case 結束時撰寫 break 來中斷，無論接下來的條件是否符合，都會一直執行到出現 break 或 switch 結束為止，這會是相當大的失誤。

var x = 0;
switch (x) {
  case 0:
    console.log(0); // 此處漏掉 break
  case 1: 
    console.log(1); // 繼續執行，此處也漏掉 break
  case 2:
    console.log(2); // 繼續執行
    break; // 終止執行
  case 3:
    console.log(3); 
    break;
  default:
    console.log('default');
}

---執行結果---
console:
0
1
2

💎 if 和 switch 簡單比較

整理了各種網路資源，歸納出以下表格：
|| if | switch |
|:-:|:-:|:-:|
| 易讀性 | 判斷條件少時較佳 | 判斷條件多時佳 |
| 效能 | 專案複雜時較差 | 專案複雜時較佳|
| 判斷方式 | 撰寫者決定嚴謹度 | 嚴格比較（===） |
| 使用時機 | 適合在少量決策、連續區間 | 適合大量決策、獨立區間 |

💎 延伸技巧

🔸 條件（三元）運算子

條件運算子像是 if...else 的簡化版，寫法如下：

/* 條件 ? 結果為truthy時執行 : 結果為falsy時執行 */

let a = 1;
a > 1 ? console.log('yes') : console.log('no');

條件運算子也可以做到 else if，但是可讀性不太好，寫起來也容易漏掉符號：

let a = 1;
a > 3 ? console.log(`${a} > 3`)
: a > 2 ? console.log(`${a} > 2`)
: a > 1 ? console.log(`${a} > 1`)
: console.log(`${a} <= 1`);

🔸 Early Return

當條件判斷多的時候，很容易寫出好幾層的巢狀判斷，不但不好閱讀，也降低執行效能。
這時可以挑出一些必要的條件，不符合就直接終止（return），可以減少巢狀、提高可讀性，也能提昇程式執行效率。

function doSomething(a, b){
  // 不是數字就結束
  if(isNaN(parseFloat(num1))||isNaN(parseFloat(num2))) return;
  // 主要判斷邏輯
  if(...){
    if(...){
    ...
}

參考資料：
MDN-if...else
MDN-switch
Ray-JavaScript 的 if 跟 switch 效能
MDN-條件運算子
askie-五個小技巧讓你寫出更好的 JavaScript 條件語句